/**
 * create by young (young2f@outlook.com) on 2020/10/26
 */

'use strict';
/**
 * 传入labels和values对象
 * labels:{key:key,label:标题}
 * values:{key:内容}
 */
import React, {Component} from 'react';
import {Tooltip, Descriptions, Tag} from 'antd';
import ViewTitle from '../ViewTitle';
import moment from "moment";

class DescriptionGroup extends Component {
  constructor(props) {
    super(props);
  }

  getItem = () => {
    const {labels = [], values = []} = this.props;

    const temp = [];
    labels.map(item => {
      const {key, label, _type} = item;
      let _value = values[key];

      let value=_value;
      if (_value) {
        if (_value < 0) {
          value = <Tag color="#f50">{_value}</Tag>;
        }
        if (_type === 'date' || _type === 'dateRange') {
          value = moment(_value).format('YYYY-MM-DD');
        }
        if (_type === 'time') {
          value = moment(_value).format('YYYY-MM-DD HH:mm:ss');
        }
      }
      if (_type === 'boolean') {
        value = _value? "是" : '否';
      }

      temp.push(
        <Descriptions.Item label={label}
        >
          {<Tooltip placement="topRight" title={value}>
            <div style={{width: '180px'}}>{value}</div>
          </Tooltip>}
        </Descriptions.Item>
      );
        // else {
      //   temp.push(
      //     <Descriptions.Item label={label}
      //     >
      //       {<Tooltip placement="topRight" title={""}>
      //         <div style={{width: '100px'}}>{""}</div>
      //       </Tooltip>}
      //     </Descriptions.Item>
      //   );
      // }

    });
    return temp;
  };

  render() {
    const {title, subTitle, actions, size = 'small', style, column} = this.props;
    return (
      <div>
        {title && <ViewTitle
          title={title}
          subTitle={subTitle}
          style={style}
          actions={actions}
        ></ViewTitle>}
        <Descriptions size={size} bordered column={column}>
          {this.getItem()}
        </Descriptions>
      </div>

    );
  }
}

export default DescriptionGroup;
